.hzdz-text-number {
  display: flex;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  // background-color: gray;
	left: 1.5182vw;
  top: 18.1089vh;
  
  // 响应式适配 - 基准分辨率为3952x1248
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }

  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }

  @media screen and (min-width: 5120px) {
    transform: scale(1.7778); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
  // 当父容器有缩放时，禁用响应式适配
  &.no-responsive-scale {
    @media screen and (max-width: 1920px) {
      transform: none;
    }
    
    @media screen and (max-width: 1080px) {
      transform: none;
    }
    
    @media screen and (min-width: 5120px) {
      transform: none;
    }
  }
  &__text {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }

  &__number {
    display: inline-block;
    background: linear-gradient(to bottom,#FFFFFF 0%, #FFFFFF 40%, #81C6FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  // 布局方向
  &--vertical {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: fit-content;

    .hzdz-text-number__text {
      margin-bottom: 0;
    }
  }

  &--horizontal {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    width: fit-content;

    .hzdz-text-number__text {
      margin-bottom: 0;
    }
  }

  // 对齐方式
  &--left {
    align-items: flex-start;
    text-align: left;
  }

  &--center {
    align-items: center;
    text-align: center;
  }

  &--right {
    align-items: flex-end;
    text-align: right;
  }

  // 尺寸预设 - 只调整字体大小，不固定容器尺寸
  &--small {
    .hzdz-text-number__text {
      font-size: 12px;
      line-height: 16px;
    }

    .hzdz-text-number__number {
      font-size: 18px;
      line-height: 20px;
    }

    &.hzdz-text-number--vertical {
      gap: 4px;
    }

    &.hzdz-text-number--horizontal {
      gap: 8px;
    }
  }

  &--medium {
    .hzdz-text-number__text {
      font-size: 16px;
      line-height: 22px;
    }

    .hzdz-text-number__number {
      font-size: 28px;
      line-height: 28px;
    }

    &.hzdz-text-number--vertical {
      gap: 8px;
    }

    &.hzdz-text-number--horizontal {
      gap: 12px;
    }
  }

  &--large {
    .hzdz-text-number__text {
      font-size: 20px;
      line-height: 28px;
    }

    .hzdz-text-number__number {
      font-size: 36px;
      line-height: 36px;
    }

    &.hzdz-text-number--vertical {
      gap: 12px;
    }

    &.hzdz-text-number--horizontal {
      gap: 16px;
    }
  }

  // 主题样式
  &--dark {
    .hzdz-text-number__text {
      color: #FFFFFF;
    }

    .hzdz-text-number__number {
      background: linear-gradient(to bottom,#FFFFFF 0%, #FFFFFF 30%, #81C6FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }

  &--light {
    .hzdz-text-number__text {
      color: #333333;
    }

    .hzdz-text-number__number {
      color: #0066cc;
      // background: linear-gradient(90deg, #333333 0%, #0066cc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  // 悬停效果
  &:hover {
    transform: translateY(-1px);

    .hzdz-text-number__number {
      filter: brightness(1.1);
    }

    .hzdz-text-number__text {
      filter: brightness(1.05);
    }
  }

  &:active {
    transform: translateY(0);
  }

  // 响应式处理
  @media (max-width: 768px) {
    &--horizontal {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  }
}

// 数字动画效果 (可选)
.hzdz-text-number__number {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    transition: left 0.5s ease;
  }
}

.hzdz-text-number:hover .hzdz-text-number__number::after {
  left: 100%;
}

// 自定义滚动条样式 (如果需要)
.hzdz-text-number__text::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.hzdz-text-number__text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}

.hzdz-text-number__text::-webkit-scrollbar-track {
  background: transparent;
}
